<template>
  <!-- 支付方式选择 -->
  <div class="ques-pop-box">
    <div class="price-pop pop-box-item">
      <div class="layui-layer-title" style="cursor: move;">{{businessName}}金额支付</div>
      <div id="" class="layui-layer-content">
        <div class='tip'>您正在支付{{businessName}}费用</div>
        <div class='lab'>{{businessName}}金额为<i>{{questionInfo.payAmount | moneyFormat}}</i>中亿币</div>
        <div class='type'>
          <span v-for="(item, index) in payTypeList"
            :key ="item.val"
            @click="selectPayType(index)"
            class='type-i'
            :class="[{'on' : currentSelectedType===index}, item.icon]"></span>
        </div>
        <button class='price-btn' @click="doPay()" :class="{'black': paying}">立即支付</button>
        <div class='agree'>支付即代表同意<a href='javascript:void(0)' @click='showAgreementFlag = true'>《中亿理投师付费/免费服务使用协议》</a></div>
      </div>
      <span class="layui-layer-setwin">
        <a @click="closeBox()" class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:void(0);"></a>
      </span>
    </div>
    <Agreement typeName="agreement" v-if="showAgreementFlag" @closeFn="closeAgreementBox"/>
  </div>
</template>

<script>
import Agreement from '@/components/agreement/agreement'
import {
  orderQuestion,
  orderQuestionBuyer,
  getWallet
} from '@/service/api'
export default {
  props: ['businessType', 'questionInfo'],
  components: {
    Agreement
  },
  data () {
    return {
      currentSelectedType: 0,
      balance: 0.00,
      payTypeList: [
        // {
        //   val: 'alipay',
        //   icon: 'type-i-1'
        // },
        // {
        //   val: 'weiwin',
        //   icon: 'type-i-2'
        // },
        {
          val: 'wallet',
          icon: 'type-i-3'
        }
      ],
      showAgreementFlag: false,
      paying: false
    }
  },
  computed: {
    businessName: {
      get () {
        return ['提问', '解锁回答'][this.businessType] // businessType 0 表示 提问问题。1表示解锁问题
      }
    }
  },
  mounted () {
    this.getMyWalletInfo()
  },
  methods: {
    showLoadingModal () {
      if (window.layer) {
        this.layerLoad = window.layer.load(0, {
          shade: false
        })
      }
    },
    closeLoadingModal () {
      if (window.layer) {
        window.layer.close(this.layerLoad)
      }
    },
    // 获取我的钱包信息
    getMyWalletInfo () {
      getWallet({}).then(res => {
        let tempData = res.data
        if (tempData) {
          this.balance = tempData.income
        }
      })
    },
    selectPayType (index) {
      this.currentSelectedType = index
    },
    async doPay () {
      let payType = this.payTypeList[this.currentSelectedType].val
      // 钱包支付但是余额不足
      if (payType === 'wallet' && this.balance < this.questionInfo.payAmount) {
        this.msgTips('钱包可用余额不足，请选择其他支付方式')
        return
      }
      if (this.paying) {
        this.msgTips('信息提交中，请等待')
        return
      }
      this.paying = true
      this.showLoadingModal()
      let info = {
        businessId: this.questionInfo.businessId,
        payType: payType,
        amount: this.questionInfo.payAmount
      }
      let res = null
      if (this.businessType === '0') {
        res = await orderQuestion(info)
      } else {
        res = await orderQuestionBuyer(info)
      }
      // 钱包支付
      if (payType === 'wallet') {
        this.closeLoadingModal()
        if (res.data === '') {
          this.msgTips('购买成功，2s后进入问答详情页面')
          setTimeout(() => {
            this.paying = false
            this.$router.push('/qa/' + this.questionInfo.questionId)
          }, 2000)
        } else {
          this.msgTips('购买失败，' + res.data.msg)
        }
        return
      }
      // 在线支付
      if (res.data) {
        this.paying = false
        this.closeLoadingModal()
        let str = res.data.replace(/\\"/g, '"')
        var newwindow = window.open('', '_self', '')
        newwindow.document.write(str)
      }
      this.closeBox()
    },
    closeBox () {
      this.$emit('closeFn')
    },
    msgTips (tips) {
      window.layui.layer.msg(tips)
    },
    closeAgreementBox () {
      this.showAgreementFlag = false
    }
  }
}
</script>

<style scoped lang="scss">
$icon:'../../assets/res/img/icon_re.png';
.ques-pop-box{
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right: 0;
  background-color:rgba(0, 0, 0, .3);
  z-index: 10000;
}
.pop-box-item {
  border-radius: 10px !important;
  background-color: #fff;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
/* 提问金额支付 */
.price-pop{
  width: 400px !important;
  height: 412px !important;
  border-radius: 10px !important;
}
.price-pop .layui-layer-title{
  height: 46px;
  font-size: 16px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
}
.price-pop .tip{
  text-align: center;
  margin: 16px 0;
}
.price-pop .lab{
  width: 343px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  background-color: #eeeeee;
  margin: 0 auto;
}
.price-pop .lab i{
  font-size: 16px;
  font-weight: bold;
  color: #f04e2d;
  margin: 0 4px;
}
.price-pop .type{
  margin: 20px 0;
  text-align: center;
}
.price-pop .type .type-i{
  display: inline-block;
  vertical-align: top;
  width: 98px;
  height: 116px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #e5e5e5;
  margin-right: 20px;
  background-image: url($icon);
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
}
.price-pop .type .type-i:hover{
  border-color: #3b96ed;
}
.price-pop .type .type-i:last-child{
  margin-right: 0;
}
.price-pop .type .type-i-1{
  background-position: -569px 15px;
}
.price-pop .type .type-i-2{
  background-position: -706px 15px;
}
.price-pop .type .type-i-3{
  background-position: -835px 15px;
}
.price-pop .type .on{
  border-color: #3b96ed;
}
.price-pop .type .on::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(60, 186, 234, 0.21);
}
.price-pop .price-btn{
  width: 106px;
  height: 42px;
  border-radius: 21px;
  color: #fff;
  background-color: #f04e2d;
  display: block;
  margin: 0 auto;
  &.black {
    background-color: #A6A6A6;
  }
}
.price-pop .agree{
  text-align: center;
  color: #808080;
  margin-top: 16px;
}
.price-pop .agree a{
  color: #1b74ce;
}
</style>
